import React, { useEffect, useState } from 'react'
import { FlatList, StyleSheet, TouchableOpacity, Text, View, Image, ImageBackground, Modal, Dimensions, Button } from 'react-native';
import axios from '../../api/axios';
import moment from 'moment';
import { baseURL, useAuth } from '../../context/AuthProvider';
import Swipeout from 'react-native-swipeout';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { AntDesign } from '@expo/vector-icons';
const add = (m) => { return m < 10 ? '0' + m : m }
//将时间戳转为普通格式
const fortime = (shijianchuo) => {
    var time = new Date(shijianchuo);
    var y = time.getFullYear();
    var m = time.getMonth() + 1;
    var d = time.getDate();
    var h = time.getHours();
    var mm = time.getMinutes();
    var s = time.getSeconds();
    return y + '-' + add(m) + '-' + add(d) + ' ' + add(h) + ':' + add(mm) + ':' + add(s);
}
const { width, height } = Dimensions.get('window');
const Btn = ({ children, style, color, ...rest }) => {
    return (
        <TouchableOpacity {...rest} style={
            {
                justifyContent: 'center',
                alignItems: 'center',
                ...style
            }
        }>
            <Text style={{ color: color ? color : '#fff' }}>{children}</Text>
        </TouchableOpacity>
    )
}
//传过来了userid
const NowGrow = ({ navigation, route }) => {
    const { user } = useAuth()
    let userid = user.userid
    //用于存放收藏列表数据
    // const [collectionList, setCollectionList] = useState([]);
    const [croplist, setCropList] = useState([]);
    const [visible, setVisible] = useState(false)
    const [id, setId] = useState(0)
    useEffect(() => {
        axios.post('/crop/getallmycrops', { userid: user.userid }).then(res => {
            console.log(res);
            if (res.code == 200) {
                setCropList(res.data);
                console.log(res.data);
            }
        })
    }, [])
    const isdelete = (id)=>{
        console.log(id);
        setId(id)
        setVisible(true)
    }
    const confirm = ()=>{
        axios.post('/crop/delone', {userid: user.userid, id: id}).then(res=>{
            if(res.code == 200){
                alert("删除成功")
                setVisible(!visible)
                axios.post('/crop/getallmycrops', { userid: user.userid }).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        setCropList(res.data);
                        console.log(res.data);
                    }
                })
            }
        })
    }
    const footerButtons = [
        { text: 'Cancel', onPress: () => console.log('cancel') },
        { text: 'Ok', onPress: () => console.log('ok') },
    ]
    return (
        <View>
            <Modal
                animationType="slide"
                transparent={true}
                visible={visible}
                onRequestClose={() => {
                    Alert.alert("Modal has been closed.");
                    setVisible(!visible);
                }}
                footer={footerButtons}
            >
                <ImageBackground style={{ width: '100%', height: '100%', backgroundColor: '#00000099', justifyContent: 'center' }}>
                    <View style={styles.modalView}>
                        <Text style={{ margin: 10 }}>是否确认删除该作物？</Text>
                        <View style={{ flexDirection: 'row', width: '50%', alignItems: 'center', justifyContent: 'space-between' }}>
                            <Button title='取消' style={{ marginRight: 5 }} onPress={() => setVisible(false)}></Button>
                            <Button title='确认' style={{ margin: 15 }} onPress={confirm}></Button>
                        </View>
                    </View>
                </ImageBackground>
            </Modal>
            <FlatList
                data={croplist}
                renderItem={({ item, index }) => {
                    return (
                        <View style={{ marginBottom: 5, marginTop: 5, backgroundColor: '#fff' }} key={item.id}>
                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                <View style={{ width: 120, height: 120, alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                                    <Image source={{ uri: baseURL + item.growimg }} style={{ width: 100, height: 100, resizeMode: 'contain' }}></Image>
                                </View>
                                <View style={{width: '65%'}}>
                                    <Text style={{margin: 5}}>{item.cropname}</Text>
                                    <Text style={{margin: 5}}>当前生长阶段{item.nowgrownum}</Text>
                                    <Text style={{margin: 5}}>开始种植时间：{fortime(item.startday)}</Text>
                                </View>
                                <View style={{justifyContent: 'flex-start', height: '100%', width: '10%'}}>
                                    <AntDesign name="delete" size={24} color="black" style={{marginTop: 10}} onPress={()=>{isdelete(item.id)}}/>
                                </View>
                            </View>
                        </View>
                    )
                }}
            />
        </View>)
}
const styles = StyleSheet.create({
    addTime: {
        height: 40,
        lineHeight: 40,
        marginLeft: width * 0.035,
        color: '#c1c1c1'
    },
    textBox: {
        width: '75%',
        justifyContent: 'center',
        paddingLeft: '3%',
        maxHeight: height * 0.14
    },
    modalView: {
        margin: 50,
        backgroundColor: "white",
        borderRadius: 20,
        padding: 35,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
        justifyContent: 'center'
        // opacity: 1
    },
    textTitle: {
        lineHeight: 25,
        fontSize: 15,
        width: '92%',
        maxHeight: '60%',
        marginBottom: '2%'
    },
    textImg: {
        width: width * 0.17,
        height: width * 0.17,
        backgroundColor: '#fee'
    },
    outBox: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: '2.5%'
    },
});


export default NowGrow;